<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript">
  var grid = jQuery("#listProductItem");
  jQuery("#listProductItem")
      .jqGrid(
          {
            url : '${pageContext.request.contextPath}/inventory/productAttribute/getProductItems.action',
            datatype : "json",
            colNames : ['ID','version',
                '<s:property value="getText(\'field.stock.keeping.unit\')" />',
                '<s:property value="getText(\'field.product.name\')" />',
                '<s:property value="getText(\'field.product.attribute.name\')" />',
                '<s:property value="getText(\'field.product.item.price.count\')" />'],
            colModel : [{
              name : 'id',
              index : 'id',
              editable : false,
              hidden : true,
              editrules : {
                edithidden : false
              },
              width : 10
            },{
              name : 'version',
              index : 'version',
              editable : true,
              hidden : true,
              width : 2
            },{
              name : 'sku',
              index : 'sku',
              width : 120
            },{
              name : 'productName',
              index : 'productName',
              width : 190
            },{
              name : 'name',
              index : 'name',
              width : 130
            },{
              name : 'itemPriceCount',
              index : 'itemPriceCount',
              width : 130
            }],
            jsonReader : {
              root : "rows",
              page : "page",
              total : "total",
              records : "records",
              repeatitems : false,
              id : "id",
              cell : "",
              userdata : ""
            },
            rowNum : 10,
            rowList : [10,20,30],
            pager : '#pagingProductItem',
            sortname : 'sku',
            viewrecords : true,
            sortorder : "asc",
            multiselect : false,
            autowidth : true,
            height : 350,
            caption : "<s:property value='getText(\"title.list.product.attribute\")' />"
          }).navGrid('#pagingProductItem',{
        edit : false,
        add : false,
        del : false,
        view : true,
        search : false,
        addfunc : function() {
        },
        editfunc : function(id) {
        },
        viewfunc : function(id) {
          $('#mainListProductItem').hide(10,function() {
            $('#editProductItem').load('inventory/price/viewProductItemPrice.action',{
              'productAttribute.id' : id
            });
          });
        }
      });
</script>
<div style="width: 800px;" id="mainListProductItem">
  <table id="listProductItem"></table>
  <div id="pagingProductItem"></div>
</div>
<div id="editProductItem"></div>